<template>
	<view class="content">
		<view v-for="(item,index) in dataList" class="item">
			<view class="f-c-b">
				<view class="f30">{{item.storeName}}</view>
				<view v-show="show" class="c6 f25">退货中</view>
			</view>
			<view class="" v-for="(item2,index2) in item.dataList">
				<view class="item-item2">
					<view class="f-c-c">
						<view class="">
							<image :src="item2.url" mode="widthFix"></image>
						</view>
						<view class="item-item2-right">
							<view>{{item2.title}}</view>
							<view class="c6 price_num f-c-b">
								<view class="price">
									<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
									<text>{{item2.price.split('.')[1]}}</text>
								</view>
								<view class="">×{{item2.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="infoOut">
			<view class="info">
				<view class="item f-c-b">
					<view>订单编号</view>
					<view>10561851651651</view>
				</view>
				<view class="item f-c-b">
					<view>订单创建时间</view>
					<view>10561851651651</view>
				</view>
				<view class="item f-c-b">
					<view>付款时间</view>
					<view>10561851651651</view>
				</view>
			</view>
		</view>

		<view class="infoOut last">
			<view class="rebackReason" v-show="show">
				<view>退货原因</view>
				<view class="c6 f25">不好看</view>
			</view>
		</view>

		<view class="bottom_item f-c-b">
			<view class="">
				合计：<text class="f40" style="color: #EF2A2A;">￥{{priceAll(dataList[0].dataList)}}</text>
			</view>
			<view class="bottom-right f-c-c f25">
				<view class="bottom-right-btn2 f-c-c cw">联系商家</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				show: false
			}
		},
		onLoad(e) {
			if (e.type == 1) {
				this.show = true
			}
			this.dataList.push(JSON.parse(e.list))
		},
		methods: {

		},
		computed: {
			priceAll() {
				return function(item) {
					let priceAll = 0;
					console.log(item);
					item.forEach(item => {
						priceAll += item.num * Number(item.price)
					})
					return priceAll.toFixed(2)
				}
			}
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
		padding-top: 20rpx;
	}

	.item {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		margin: 0 20rpx;
	}

	.item-item2 {
		margin: 10rpx 0;
	}

	.item-item2-right {
		margin-left: 20rpx;
	}

	.item-item2 image {
		width: 160rpx;
	}

	.price_num {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.price {
		margin-right: 50rpx;
	}

	.infoOut {
		background-color: #F4F4F4;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.info {
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.bottom-right-btn2 {
		width: 137rpx;
		height: 44rpx;
		border-radius: 30rpx;
	}

	.bottom-right-btn2 {
		background-color: #FF8710;
	}

	.bottom_item {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
	}

	.rebackReason {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.rebackReason view:nth-child(1) {
		margin-bottom: 20rpx;
	}

	.last {
		padding-bottom: 100rpx;
	}
</style>
